<template>
  <div class="login">
    <navigation-bar :pageName="'登录'" @onLeftClick="onBackClick"></navigation-bar>
    <!-- 内容区 -->
    <div class="login-content">
      <!-- 用户名 -->
      <div class="input-container">
        <input placeholder="用户名" type="text" v-model="username" />
      </div>
      <!-- 密码 -->
      <div class="input-container">
        <input placeholder="密码" type="password" v-model="password" />
      </div>
      <div @click="onLoginClick" class="login-content-login page-commit">登录</div>
      <a @click="onToRegisterClick" class="login-content-register">注册新用户</a>
    </div>
  </div>
</template>

<script>
import NavigationBar from '@com/currency/NavigationBar'
import md5 from '@js/md5.min.js'
export default {
  name: 'login',
  components: {
    NavigationBar
  },
  data () {
    return {
      // 用户名
      username: '',
      // 密码
      password: '',
      // md5 加密的密码
      md5Password: ''
    }
  },
  methods: {
    onBackClick () {
      this.$router.go(-1)
    },
    onLoginClick () {
      if (this.username.length === 0 ||
                this.password.length === 0) {
        alert('用户名或密码未输入')
        return
      }
      // 与原生交互，验证用户输入的用户名和密码
      // 对用户输入的密码进行 MD5 加密
      this.md5Password = md5(this.password)
      // todo:判断当前的项目是运行在 Android 设备还是 IOS 设备中
    },
    /**
         * 立即注册点击事件
         */
    onToRegisterClick: function () {
      this.$router.push({
        name: 'register',
        params: {
          routerType: 'push'
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.login {
  // 页面组件过渡动画，脱离标准文档流
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white;
  &-content {
    width: 100%;
    height: 100%;
    &-login {
      margin-top: 40%;
    }
    &-register {
      font-size: $infoSize;
      color: $hintColor;
      margin-top: $marginSize;
      padding: $marginSize;
      float: right;
    }
  }
}
</style>
